<template>
	<div>
		<sh-count-to :end="1234" class="count-block"></sh-count-to>
		<sh-count-to :end="1234" class="count-block" count-class="count-text"></sh-count-to>
		<sh-count-to :end="123400" class="count-block" count-class="count-text">
			<template #left><span>￥</span></template>
			<template #right><span>元</span></template>
		</sh-count-to>
		<sh-count-to :end="1234" class="count-block" count-class="count-text" :decimals="2">
			<template #left><span>￥</span></template>
			<template #right><span>元</span></template>
		</sh-count-to>
		<sh-count-to simplify :end="1234" class="count-block" count-class="count-text" :unit="countunit">
			<template #left><span>￥</span></template>
			<template #right><span>元</span></template>
		</sh-count-to>
	</div>
</template>

<script>
export default {
	name: 'BaseCountTo',
	props: {},
	data() {
		return {
			countunit: [
				[1, '十多'],
				[2, '百多'],
				[3, '千多'],
				[4, '万多'],
				[5, '十万多'],
				[6, '百万多'],
				[7, '千万多'],
				[8, '亿多']
			]
		}
	},
	computed: {},
	watch: {},
	created() {},
	mounted() {},
	beforeUnmount() {},
	methods: {}
}
</script>

<style lang="scss">
.count-block {
	width: 150px;
	height: 100px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background: #ccc;
	margin: 15px;
	.count-text {
		font-size: 30px;
		color: #ff3552;
	}
}
</style>
